<script>

import UFormItem from "../../../../uview-ui/components/u-form-item/u-form-item.vue";

export default {
  components: {UFormItem},
  props: ['current-item','distance','driverDetail'],
  name: "kstJy_detail",
  computed: {
    actualPayment() {
      return this.currentItem.unitPrice * this.litreNum;
    }
  },
  data() {
    return {
      driverLicense: '', // 司机车牌号
      litreNum:'' // 升数
    }
  },
  methods: {
    /* 导航 */
    openMap() {
      uni.openLocation({
        latitude: parseFloat(this.currentItem.latitude),
        longitude: parseFloat(this.currentItem.longitude),
        name: this.currentItem.gasName,
        address: this.currentItem.gasAddress,
        success: function (res) {
          console.log(res)
        },
        fail: function (error) {
          console.log(error)
        }
      })
    },
    /* 返回列表 */
    goToBack() {
      this.$emit('back-to-list'); // 触发事件，通知父组件
    },
    /* 订单 */
    confirmPayment(){
      // 加载中样式
      uni.showLoading({
        title: '加载中...'
      })
      const postData = {
        stationId : this.currentItem.stationId,
        totalAmount : this.actualPayment,
        literNum: this.currentItem.literNum,
        unitPrice: this.currentItem.unitPrice,

        carNumber: this.driverDetail.privatecarCarnumber,
        userName: this.driverDetail.driver1,
        userMobile: this.driverDetail.tel1,
      };

      this.$http.post('/rest/kstJy/createOrder', postData, {})
          .then(res => {
            console.log("res:",res)
            uni.hideLoading(); // 关闭加载
          })
          .catch(err => {
            uni.showToast({
              title: err.data.msg || '请求失败',
              icon: 'none'
            });
            uni.hideLoading(); // 关闭加载
          })
    }
  }
}
</script>

<template>
  <view class="container">
    <!--  返回列表  -->
    <view class="button-fixed" @click="goToBack">
      <u-icon name="rewind-left" size="40"/>
    </view>
    <!-- 背景图片 -->
    <image class="background-image" :src="currentItem.gasLogoBig"></image>

    <!-- 站点信息卡片 -->
    <view class="info-card">
      <u-card margin="20 30" padding="30" border="false" :title="currentItem.gasName" :sub-title="currentItem.gasAddress">
        <view class="card-body" slot="body">
          <!-- 左侧：油价和营业时间 -->
          <view class="card-left">
            <view class="price-info">
              <u-icon name="rmb-circle-fill" color="#2979ff" size="28"/>
              <span>当前油价：{{ currentItem.unitPrice }}元</span>
            </view>
            <view class="time-info">
              <u-icon name="clock" color="#2979ff" size="28"/>
              <span>营业时间：{{ currentItem.workStartTime }} - {{ currentItem.workEndTime }}</span>
            </view>
          </view>
          <!-- 右侧：联系电话和查看更多 -->
          <view class="card-right">
            <span>距离：{{distance}} Km</span>
            <u-button type="primary" :plain="true" size="mini" @click="openMap">导航</u-button>
          </view>
        </view>
      </u-card>
    </view>

    <!-- 输入区域 -->
    <view class="input-area">
      <u-form :model="currentItem" ref="uForm">
        <u-form-item>
          <span style="font-size: larger">加油升数:</span><span style="color: darkred">（单位 升/L）</span>
          <u-input v-model="litreNum" border="true" />
        </u-form-item>
        <u-form-item>
          <span style="font-size: larger">当前车牌号:</span><span style="color: #7ccb5f;">{{ driverDetail.privatecarCarnumber }}</span>
          <u-input placeholder="司机更换车辆必填车牌号" border />
        </u-form-item>
        <u-form-item>

        </u-form-item>
      </u-form>
    </view>

    <!-- 底部固定区域 -->
    <view class="bottom-fixed-area">
      <view class="actual-payment">
        实付金额:
        <text class="price">{{ actualPayment }}</text>
      </view>
      <u-button type="primary" @click="confirmPayment">确定支付</u-button>
    </view>
  </view>
</template>

<style scoped>
.container {
  position: relative;
}

.background-image {
  width: 100%;
  height: 300rpx; /* 根据设计调整高度 */
}

.info-card {
  /* 相对位置 距顶-100 */
  position: relative;
  margin-top: -100rpx; /* 根据背景图片高度调整 */
  background-color: rgba(255, 255, 255, 0.85); /* 背景颜色设置为白色，并且50%的透明度 */
  border-radius: 10rpx;
  overflow: hidden;
  padding: 20rpx;
}

.input-area {
  margin-top: 30rpx;
  width: 100%;
  overflow: auto; /* 如果内容超出可以滚动 */
  background-color: white;
  border-radius: 10rpx;
  padding: 20rpx;
 }

.bottom-fixed-area {
  /* fixed 固定定位 距底0/左0/右0 白色 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  /* 里面的内容水平居中 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.1);
}

.actual-payment {
  font-size: 32rpx;
}

.price {
  color: red;
}

.button-fixed {
  /* fixed 固定定位 距底0/左0/右0 白色 */
  position: fixed;
  top: 10rpx;
  left: 10rpx;
}
</style>
